<template>
  <v-main class="full-height">
    <v-app-bar
        flat
        fixed
        align="center"
        height="60px"
    >
      <v-container>
        <v-row justify="center" class="py-0">
          <v-col cols="3" class="text-left pl-0">
            <v-btn icon @click="$router.back()" class="ml-n3" >
              <v-icon color="lighten-1" >mdi-arrow-left</v-icon>
            </v-btn>
          </v-col>
          <v-col cols="6">
            <div class="mt-3">
              妆典账号
            </div>
          </v-col>
          <v-col cols="3" class="text-right pr-0">
            <v-btn icon @click="commit" class="mr-n3">
              <v-icon color="primary" size="30">mdi-check</v-icon>
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-app-bar>
    <v-container class="mt-15 pa-0">
      <v-row justify="center" class="mt-5">
        <v-col cols="12" class="py-0">
          <v-list >
            <!--        头像-->
            <v-list-item>
              <v-list-item-content>
                <v-row no-gutters align="center">
                  <v-col cols="auto">
                    头像
                  </v-col>
                  <v-col cols="auto" class="ml-auto" @click="overlay=true">
                    <v-avatar size="85" color="grey lighten-3">
                      <img
                          v-if="getAvatarPath"
                          :src="getAvatarPath"
                      >
                    </v-avatar>
                  </v-col>
                </v-row>
              </v-list-item-content>

            </v-list-item>
            <!--        昵称-->
            <v-list-group v-model="active.active0">
              <template v-slot:activator>
                <v-list-item-content>
                  <v-row class="full-width">
                    <v-col cols="4">昵称</v-col>
                    <v-col cols="8" class="text-right text-truncate">{{ getNickname }}</v-col>
                  </v-row>
                </v-list-item-content>
              </template>

              <v-list-item>
                <v-list-item-content>
                  <v-text-field
                      ref="nickname1"
                      label="修改昵称"
                      counter="15"
                      :rules="[rules.required,rules.maxLength(15)]"
                      v-model="modifyingData.nickname"
                  >
                  </v-text-field>
                </v-list-item-content>
              </v-list-item>
            </v-list-group>
            <!--        个性签名-->
            <v-list-group  v-model="active.active1">
              <template v-slot:activator>
                <v-list-item-content>
                  <v-row class="full-width">
                    <v-col cols="4">个性签名</v-col>
                    <v-col cols="8" class="text-right text-truncate">{{ getDescription }}</v-col>
                  </v-row>
                </v-list-item-content>
              </template>

              <v-list-item>
                <v-list-item-content>
                  <v-textarea
                      ref="description1"
                      label="个性签名"
                      counter="30"
                      :rules="[rules.maxLength(30)]"
                      auto-grow
                      v-model="modifyingData.description"
                  ></v-textarea>
                </v-list-item-content>
              </v-list-item>
            </v-list-group>
            <!--        性别-->
            <v-list-group v-model="active.active2">
              <template v-slot:activator>
                <v-list-item-content>
                  <v-row>
                    <v-col cols="auto">性别</v-col>
                    <v-col cols="auto" class="ml-auto">{{ getGender }}</v-col>
                  </v-row>
                </v-list-item-content>
              </template>

              <v-list-item>
                <v-list-item-content>
                  <v-row justify="center">
                    <v-col cols="auto" class="mr-10">
                      <v-avatar size="55" :color="modifyingData.gender==='0'?'primary':'grey lighten-2'"
                                @click="modifyingData.gender='0'">
                        <span class="white--text">男</span>
                      </v-avatar>
                    </v-col>
                    <v-col cols="auto">
                      <v-avatar size="55" :color="modifyingData.gender==='1'?'pink accent-1':'grey lighten-2'"
                                @click="modifyingData.gender='1'">
                        <span class="white--text">女</span>
                      </v-avatar>
                    </v-col>

                  </v-row>
                </v-list-item-content>
              </v-list-item>
            </v-list-group>
            <!--        出生年月-->
            <v-list-group v-model="active.active3">
              <template v-slot:activator>
                <v-list-item-content>
                  <v-row>
                    <v-col cols="auto">出生年月</v-col>
                    <v-col cols="auto" class="ml-auto">{{ modifyingData.birthday === '' ? '未设置' : modifyingData.birthday }}</v-col>
                  </v-row>
                </v-list-item-content>
              </template>
              <v-list-item>
                <v-container>
                  <v-row justify="center" class="mt-0">
                    <v-date-picker v-model="modifyingData.birthday" no-title
                                   :month-format="monthFormat"
                                   :weekday-format="weekdayFormat"
                                   :header-date-format="headerDateFormat"
                                   :color="modifyingData.gender==='1'?'pink accent-1':'primary'"
                                   class="border-1px-grey mb-4"
                    ></v-date-picker>
                  </v-row>

                </v-container>
              </v-list-item>
            </v-list-group>

          </v-list>
        </v-col>
      </v-row>
    </v-container>

<!--    选择上传图片的蒙版-->
    <v-overlay :value="overlay">
      <v-container class="mt-15" style="width: 250px;">
        <v-row v-show="imgSrc">
          <v-col class="pa-0">
            <img :src="imgSrc" id="imageCrop" ref="imageCrop" style="max-width: 250px">
          </v-col>
        </v-row>
        <v-row v-show="!imgSrc" justify="center">
          <image-uploader
              :autoRotate=true
              :preview=false
              :className="['fileinput']"
              outputFormat="verbose"
              :capture="false"
              accept="image/png,image/jpg,image/jpeg,image/gif"
              @input="setImage"
          >
            <label for="fileInput" slot="upload-label">
              <v-card :width="picScale" :height="picScale" class="d-flex flex-column align-center justify-center" light>
                <v-icon class="d-block" size="40">
                  mdi-plus
                </v-icon>
              </v-card>
            </label>
          </image-uploader>
        </v-row>
        <v-row justify="center">
          <v-col cols="auto">
            <v-btn color="lighten-4" light @click="cancelImage">
              取消
            </v-btn>
          </v-col>
          <v-col cols="auto">
            <v-btn color="primary" @click="submitImage">
              确定
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-overlay>

  </v-main>

</template>

<script>
import {baseUrl, imageSize, imgPrefixUrl} from "../myConfig"
import {printMsg, rules, simpleCopy} from "../util/util";
import Cropper from "cropperjs"
import ImageUploader from 'vue-image-upload-resize'

export default {
  name: "Account",
  components: {
    ImageUploader
  },
  data: () => ({
    modifyingData:{
      birthday: '',
      gender: '',
      nickname: '',
      avatar: '',
      description:"",
      uid:'',
      privilege:'',
    },
    active :{
      active0:false,
      active1:false,
      active2:false,
      active3:false,
    },
    overlay: false,
    imageSize: imageSize,
    picScale: 150,
    imgSrc: '',
    cropper: '',
    rules:rules
  }),
  methods: {
    monthFormat(a) {
      return a.split('-')[1].replace('0', '') + '月'
    },
    weekdayFormat(a) {
      let week = ['日', '一', '二', '三', '四', '五', '六']
      let b = parseInt(a.split('-')[2]) - 15
      return week[b]
    },
    headerDateFormat(a) {
      let b = a.split('-')
      if (b.length === 2) {
        return `${b[0]}年${b[1]}月`
      } else {
        return `${b[0]}年`
      }
    },
    setImage: function (output) {
      this.imgSrc = output.dataUrl
      printMsg(output,this)
      this.cropper = new Cropper(this.$refs.imageCrop, {
        aspectRatio: 1,
        viewMode: 1,
        background: false,
        zoomable: true,
        autoCropArea: 1,
      })
      this.cropper.replace(this.imgSrc)
    },
    submitImage: function () {
      //对图片压缩处理
      if (this.cropper){
        this.imgSrc = this.cropper.getCroppedCanvas({height:100,width:100}).toDataURL("image/jpeg",0.9)

        this.$http.post('file/saveImage',{
          base64File:this.imgSrc
        }).then(res=>{
          this.modifyingData.avatar = res.data.fileName
          this.overlay = false
        }).catch(res=>{
          printMsg(res.msg,this)
        })
      }else{
        this.overlay = false
      }
    },
    cancelImage: function () {
      this.cropper = undefined
      this.overlay = false
      this.imgSrc = ''
    },
    commit(){
      if(!(rules.required(this.modifyingData.nickname)===true) || !(rules.maxLength(15)(this.modifyingData.nickname)===true)){
        this.active.active0 = true
        this.$nextTick(()=>{
          printMsg("tick nick",this)
          this.$refs['nickname1'].validate(true)
        })
        return
      }
      if (!(rules.maxLength(30)(this.modifyingData.description)===true)){
        this.active.active1 = true
        this.$nextTick(()=> {
          printMsg("tick desc",this)
          this.$refs['description1'].validate(true)
        })
        return
      }
      if (this.modifyingData.gender!=='1' && this.modifyingData.gender!=='0'){
        this.active.active2 = true
        this.$emit('toast','必须选择性别哦')
        return
      }
      if (!this.modifyingData.birthday || this.modifyingData.birthday===''){
        this.active.active3 = true
        this.$emit('toast','必须选择生日哦')
        return
      }
      if (this.modifyingData.avatar === ''){
        this.$emit('toast','头像不能为空哦')
      }

      let data = this.modifyingData
      this.$http.post('user/changeInfo',data).then(res=>{
        this.$emit('toast','修改成功')
        this.$store.commit('init',res.data)
      }).catch(res=>{
        this.$emit('toast',res.msg)
      })
    }

  },
  computed: {
    getGender() {
      if (this.modifyingData.gender === '0') return '男'
      if (this.modifyingData.gender === '1') return '女'
      return '未设置'
    },
    getNickname(){
      return this.modifyingData.nickname === '' ? '未设置' : this.modifyingData.nickname
    },
    getDescription(){
      return this.modifyingData.description === '' ? '未设置' : this.modifyingData.description
    },
    getAvatarPath(){
      if (this.modifyingData.avatar){
        return baseUrl+imgPrefixUrl+this.modifyingData.avatar
      }else{
        return this.$store.getters.getAvatar
      }
    }
  },
  mounted() {
    simpleCopy(this.$store.state, this.modifyingData)
  }
}
</script>

<style scoped>

</style>


